<template>
  <div class="header-info-waper" style="">
    <div class="header-infos" style="">
      <div v-for="item in cates" :key="item._id" class="info-content-waper" @click="handleClickCategory(item._id)">
        <span class="info-icon">
          <img :src="item.pic" alt="">
          <span class="info-title">{{ item.title }}</span>
        </span>
        <p class="title-describe">
          <span>{{ item.desc }}</span>
        </p>
      </div>
    </div>
    <nuxt-link class="info-all" to="/search">
      <span class="info-all-pic" />
      <span class="info-all-title">全部分类</span>
    </nuxt-link>
  </div>
</template>
<script>
import Api from '~/api'
export default {
  name: 'CategoryPicture',
  data () {
    return {
      cates: []
    }
  },
  mounted () {
    this.getRecommend()
  },
  methods: {
    getRecommend () {
      Api.getCategoryRecommend().then((res) => {
        this.cates = res.data
      })
    },
    handleClickCategory (id) {
      this.$store.commit('setSearchCategory', id)
      this.$router.push('/search')
    }
  }
}
</script>
<style lang="scss" scoped>
.header-info-waper {
  margin: 30px auto;
  overflow: hidden;
  width: 1200px;
  height: 250px;
  background: #fff;
  padding-top: 5px;
  box-sizing: border-box;
  //border-top: #959595 1px solid;
  .header-infos {
    float: left;
    width: 1130px;
    .info-content-waper {
      float: left;
      width: 16.6%;
      height: 120px;
      background-color: #fff;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
      .info-icon {
        display: inline-block;
        margin-top: 8px;
        width: 70px;
        height: 70px;
        border-radius: 100%;
        position: relative;
        &:hover{
          cursor: pointer;
        }
        img {
          width: 55px;
          height: 55px;
          border-radius: 100%;
          transition: transform .4s;
          margin-bottom: 3px;
          &.cat-self-icon {
            position: absolute;
            height: auto;
            content: url(//as.zbjimg.com/static/nodejs-zbj-utopiacs-web/widget/zp-header-v1-sitemap/img/hot_3441edf.png);
            width: 35px !important;
            right: -10px !important;
            top: 3px !important;
            border-radius: 0 !important;
          }
        }
        .info-title {
          display: block;
          font-size: 14px;
          color: #333;
          font-weight: 700;
          width: 158px;
          margin-left: -44px;
        }
      }
      .title-describe {
        color: #333;
        font-size: 12px;
        height: 30px;
        overflow: hidden;
        margin-top: 3px;
        &:hover{
          cursor: pointer;
        }
      }
    }
  }
  .info-all {
    display: inline-block;
    width: 38px;
    height: 250px;
    text-align: center;
    float: right;
    margin-top: -5px;
    border-left: 1px solid #f8f8f8;
    .info-all-pic {
      margin-top: 70px;
      display: inline-block;
      box-sizing: border-box;
      width: 18px;
      height: 18px;
      background: url(//as.zbjimg.com/static/nodejs-zbj-indexweb-api/widget/index2018/img/p1_e6f6f40.png) center center no-repeat;
      background-size: 100%;
    }
    .info-all-title {
      display: block;
      font-size: 14px;
      color: #333;
      text-align: center;
      width: 15px;
      margin: 0 auto;
    }
  }
}
</style>
